<script>
/**
 * Revenue Analytics component
 */
export default {
  data() {
    return {
      series: [
        {
          name: "有效站点",
          type: "column",
          data: [23, 32, 27, 28, 27, 32, 27, 38, 22, 31, 21, 16, 13]
        },
        {
          name: "全部站点",
          type: "line",
          data: [23, 42, 35, 37, 43, 32, 27, 39, 22, 32, 22, 16, 13]
        }
        
      ],
      chartOptions: {
        chart: {
          height: 280,
          type: "line",
          toolbar: {
            show: false
          }
        },
        stroke: {
          width: [0, 3],
          curve: "smooth"
        },
        plotOptions: {
          bar: {
            horizontal: false,
            columnWidth: "20%"
          }
        },
        dataLabels: {
          enabled: false
        },
        legend: {
          show: false
        },
        yaxis: {
          labels: {
            show: false,
            formatter: function (val) {
              return val;
            }
          }
        },
        colors: ["#5664d2", "#1cbb8c"],
        labels: ["00:00","02:00","04:00","06:00","08:00","10:00","12:00","14:00","16:00","18:00","20:00","22:00","00:00"]
      },
      sel: '全部类型',
      selbtn: '今天',
    };
  },
  methods: {
    handleCommand(value){
      this.sel = value
      let arr = []
      for (let i = 0; i <= 12; i++) {
        var day1 = new Date();
        day1.setTime(day1.getTime()-(i*2)*60*60*1000);
        var hours = day1.getHours()>9?day1.getHours():'0'+day1.getHours();
        var s1 = hours + ":00"
        arr.unshift(s1)
      }
      this.chartOptions.labels = arr
      if(value=='全部类型'){
        let data1 = [23, 32, 27, 28, 27, 32, 27, 38, 22, 31, 21, 16, 13]
        let data2 = [23, 42, 35, 37, 43, 32, 27, 39, 22, 32, 22, 16, 13]
        this.series[0].data = data1
        this.series[1].data = data2
      }else if(value=='资讯数据'){
        let data1 = [8, 22, 12, 15, 14, 12, 17, 18, 8, 11, 14, 7, 15]
        let data2 = [13, 32, 22, 21, 23, 12, 18, 19, 13, 16, 22, 7, 16]
        this.series[0].data = data1
        this.series[1].data = data2
      }else if(value=='招标数据'){
        let data1 = [5, 12, 17, 18, 17, 12, 17, 18, 12, 11, 7, 16, 9]
        let data2 = [13, 22, 25, 27, 23, 12, 17, 19, 12, 12, 8, 16, 9]
        this.series[0].data = data1
        this.series[1].data = data2
      }
      this.$refs.chart.updateOptions({
        series:this.series,
        labels:this.chartOptions.labels
      })
    },
    changebtn(value){
      this.selbtn = value;
      if(value=='今天'){
        let data1 = [23, 32, 27, 28, 27, 32, 27, 38, 22, 31, 21, 16, 13]
        let data2 = [23, 42, 35, 37, 43, 32, 27, 39, 22, 32, 22, 16, 13]
        let arr = []
        for (let i = 0; i <= 12; i++) {
          var day1 = new Date();
          day1.setTime(day1.getTime()-(i*2)*60*60*1000);
          var hours = day1.getHours()>9?day1.getHours():'0'+day1.getHours();
          var s1 = hours + ":00"
          arr.unshift(s1)
        }
        this.chartOptions.labels = arr
        this.series[0].data = data1
        this.series[1].data = data2
        this.chartOptions.labels = arr
      }else if(value=='昨天'){
        this.series[0].data = [33, 22, 22, 21, 23, 35, 17, 20, 22, 21, 15, 17,12]
        this.series[1].data = [33, 28, 25, 27, 23, 42, 17, 21, 23, 22, 17, 17,13]
        this.chartOptions.labels = ["00:00","02:00","04:00","06:00","08:00","10:00","12:00","14:00","16:00","18:00","20:00","22:00","00:00"]
      }else if(value=='前天'){
        this.series[0].data = [25, 31, 32, 28, 22, 22, 17, 22, 31, 23, 15, 16,16]
        this.series[1].data = [31, 32, 35, 29, 23, 22, 17, 27, 34, 24, 18, 17,16]
        this.chartOptions.labels = ["00:00","02:00","04:00","06:00","08:00","10:00","12:00","14:00","16:00","18:00","20:00","22:00","00:00"]
      }
      this.$refs.chart.updateOptions({
        series:this.series,
        labels:this.chartOptions.labels
      })
    }
  },
  created () {
    let arr = []
    for (let i = 0; i <= 12; i++) {
      var day1 = new Date();
      day1.setTime(day1.getTime()-(i*2)*60*60*1000);
      var hours = day1.getHours()>9?day1.getHours():'0'+day1.getHours();
      var s1 = hours + ":00"
      arr.unshift(s1)
    }
    console.log(arr);
    this.chartOptions.labels = arr
  }
};
</script>

<template>
  <div class="card">
    <div class="card-body">
      <div class="float-right d-none d-md-inline-block">
        <div class="btn-group mb-2" style="margin-bottom: 0.1rem !important;margin-right: 1rem;">
          <button type="button" @click="changebtn('前天')" :class="{'active':selbtn=='前天'}" class="btn btn-sm btn-light">前天</button>
          <button type="button" @click="changebtn('昨天')" :class="{'active':selbtn=='昨天'}" class="btn btn-sm btn-light">昨天</button>
          <button type="button" @click="changebtn('今天')" :class="{'active':selbtn=='今天'}" class="btn btn-sm btn-light">今天</button>
        </div>
        <el-dropdown trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">
            {{sel}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="全部类型">全部类型</el-dropdown-item>
            <el-dropdown-item command="资讯数据">资讯数据</el-dropdown-item>
            <el-dropdown-item command="招标数据">招标数据</el-dropdown-item>
            <el-dropdown-item command="工商数据">工商数据</el-dropdown-item>
            <el-dropdown-item command="招聘数据">招聘数据</el-dropdown-item>
            <el-dropdown-item command="股票数据">股票数据</el-dropdown-item>
            <el-dropdown-item command="政策数据">政策数据</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <h4 class="card-title mb-4" style="font-size: 17px;">数据接口调用走势变化分析</h4>
      <div>
        <div id="line-column-chart" class="apex-charts" dir="ltr"></div>
        <apexchart
          class="apex-charts"
          height="240"
          dir="ltr"
          ref="chart"
          :series="series"
          :options="chartOptions"
        ></apexchart>
      </div>
    </div>
  </div>
</template>